<template>
	<view
		class="layout-main"
		:class="{
			'product-skelett': isSkelett
		}"
	>
		<view
			:key="index"
			v-for="(productItem, index) in productList"
			@click="openProductDetail(productItem)"
			class="layout-main-item"
			:class="{
				'sold-out': isFullReminder(productItem)
			}"
		>
			<view class="layout-main-item-header flex row-between col-center">
				<view class="layout-main-item-header-left flex col-center">
					<image src="@/static/images/home/icon_home_shop@3x.png" />
					{{ productItem.shopName || '' }}
				</view>
				<view class="layout-main-item-header-right" v-if="productItem.distance">
					{{ productItem.distance }}
				</view>
			</view>
			<view class="layout-main-item-content">
				<view class="layout-main-item-content-left">
					<image :src="productItem.faceImg" mode="aspectFill" />

					<template>
						<image class="fullReminder" :src="fullReminder" />
					</template>
				</view>

				<view class="layout-main-item-content-right flex-col row-around">
					<view class="product-title">
						{{ productItem.productTitle || '' }}

						<template v-if="isSkelett">
							<view></view>
							<view></view>
						</template>
					</view>
					<view class="product-sale flex row-between col-end">
						<view class="already-sale">已售{{ productItem.saleAmount || 0 }}份</view>
						<view class="can-get" v-if="productItem.commissionMoney && productItem.commissionMoney > 0">
							<text class="get-money-remind">赚：</text>
							<text class="money-icon">￥</text>
							<text class="get-money">{{ productItem.commissionMoney || 0 }}</text>
						</view>
					</view>
					<view class="product-price">
						<view class="product-price-right flex">
							<view class="sale-price">
								￥
								<text>{{ productItem.salePrice }}</text>
							</view>

							<view class="origin-price" :class="{ 'flex-end': !productItem.discount }">
								<template v-if="productItem.discount">
									<view class="product-price-right-discount">{{ productItem.discount || 0 }}折</view>
								</template>
								<view class="price-number">￥{{ productItem.originPrice }}</view>
							</view>
						</view>
						<view class="product-price-left flex col-center row-end" v-if="productItem.cpsRadio && productItem.cpsRadio > 0">
							<image src="@/static/images/home/icon_home_fan@3x.png" />
							<view></view>
							<text class="discount">{{ productItem.cpsRadio || 0 }}<text class="littie-text">%</text></text>
						</view>
					</view>
				</view>
			</view>

			<view class="layout-main-item-footer">
				<view class="layout-main-item-footer-main">
					<view class="layout-main-item-footer-main-right">
						<image :src="iconPeople" />
						<text class="mao-hao">:</text>
						<text>{{ productItem.saleCount }}/{{ productItem.tdStock }}</text>
						人
					</view>
					<view class="layout-main-item-footer-main-left">
						<template v-if="!productItem || productItem.isActive !== false">
							<!-- <image :src="iconTime" /> -->
							距报名结束：
							<text class="countdown" :class="{ active: productItem.isActive }">
								{{ productItem | filterTimeStr }}
							</text>
						</template>

						<template v-else>
							<text class="countdown active">活动已结束</text>
						</template>
					</view>
				</view>
			</view>
			<view class="layout-main-item-other" v-if="productItem.blnReward === 1">
				<view class="layout-main-item-other-top">
					<image :src="iconHongBao" />
					发布回传视频通过最高获得{{productItem.maxRedEnvelope}}元红包
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { liveShowDateFormat } from '@/utils/common';

const iconTime = Object.freeze(require('@/static/icon/icon_home_time.png'));
const iconPeople = Object.freeze(require('@/static/images/home/img_home_tdme@3x.png'));
const iconPosition = Object.freeze(require('@/static/icon/icon_home_position.png'));
const iconHongBao = Object.freeze(require('@/static/images/home/icon_home_money@3x.png'));
const oneDayTime = 1000 * 60 * 60 * 24;
const fullReminder = `${defaultImageUrl}image/img_home_full.png`;

export default {
	name: 'Distribution-Product',
	options: {
		virtualHost: true
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},

		beforeCallBack: {
			type: Function
		},

		afterCallBack: {
			type: Function
		},

		isSkelett: {
			type: Boolean,
			default: true
		},

		skelettSize: {
			type: Number,
			default: 3
		}
	},

	data() {
		return {
			iconTime,
			iconPeople,
			iconPosition,
			iconHongBao,
			fullReminder
		};
	},

	filters: {
		filterTimeStr(params = {}) {
			const { diffTime, isActive, endTimeStr } = params;

			if (!isActive) {
				return endTimeStr;
			}

			return liveShowDateFormat(diffTime);
		}
	},

	computed: {
		productList() {
			const { list, isSkelett, skelettSize } = this;

			if (!isSkelett) {
				return list.map((item) => {
					const { salePrice, originPrice,maxRedEnvelope } = item;

					// let discount = (salePrice / originPrice) * 10;
					// if (!Number.isInteger(discount)) {
					// 	const formatDiscount = discount.toFixed(1);

					// 	discount = parseFloat(formatDiscount) ? formatDiscount : undefined;
					// }

					return {
						...item,
						// discount,
						salePrice: salePrice / 100,
						originPrice: originPrice / 100,
						maxRedEnvelope: maxRedEnvelope ? (maxRedEnvelope / 100).toFixed(2) : 0
					};
				});
			}

			return Array.from({ length: skelettSize }).map((item) => ({}));
		}
	},

	methods: {
		isFullReminder(params = {}) {
			const { saleCount = 0, tdStock = 1 } = params;

			return saleCount >= tdStock;
		},

		openProductDetail(params = {}) {
			const { id } = params;
			const { afterCallBack, beforeCallBack } = this;

			afterCallBack?.(params);

			const url = `/tandianPage/ProductDetail?productId=${id}`;

			id &&
				uni.navigateTo({
					url,
					success: () => {
						beforeCallBack?.(params);
					}
				});
		},

		isOnePrice(params = {}) {
			const { commissionType } = params;

			/**
			 * 1 拍摄费
			 * 2拍摄费 加CPS
			 * 3 CPS
			 */
			const someList = [1, 2];

			return someList.includes(commissionType);
		},

		isCommission(params = {}) {
			const { commissionType } = params;
			const someList = [2, 3];

			return someList.includes(commissionType);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout-main {
	&-item {
		margin-top: 24rpx;
		min-height: 240rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx 24rpx 0 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}

		&.sold-out {
			.layout-main-item-content {
				&-left {
					image {
						&:first-child {
							opacity: 0.5;
						}
						&.fullReminder {
							display: block;
							position: absolute;
							top: 20rpx;
							left: 20rpx;
							width: 160rpx;
							height: 160rpx;
							z-index: 1;
						}
					}
				}

				&-right {
					.product-title,
					.product-price-left {
						opacity: 0.5;
					}
				}
			}

			.layout-main-item-footer {
				display: none;
			}
		}

		&-header {
			padding: 0 10rpx 10rpx 0;
			margin-bottom: 10rpx;
			&-left {
				font-size: 28rpx;
				color: #666;
				image {
					margin-right: 12rpx;
					flex-shrink: 0;
				}
			}
			&-right {
				color: #9c9c9c;
				font-size: 24rpx;
			}
		}

		&-content {
			display: flex;
			// align-items: center;
			padding-bottom: 24rpx;
			position: relative;

			&-left {
				width: 200rpx;
				height: 200rpx;
				overflow: hidden;
				// position: relative;

				image {
					margin: 0;
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					// position: absolute;
					// left: 50%;
					// top: 0;
					// transform: translateX(-50%);

					&.fullReminder {
						display: none;
						position: static;
					}
				}
			}

			&-right {
				flex: 1;
				// height: 200rpx;
				padding-left: 20rpx;
				.product-title {
					height: 80rpx;
					color: #333;
					font-size: 28rpx;
					line-height: 40rpx;
					font-weight: bold;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.product-price {
					color: #999;
					font-size: 24rpx;

					// margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&-left {
						width: auto;
						background: #FDF4EF;
						border-radius: 8rpx;
						padding-right: 8rpx;
						.discount {
							font-family: font-number;
							font-size: 28rpx;
							color: #FF6B11;
							.littie-text{
								font-size: 20rpx;
							}
						}
						image {
							width: 44rpx;
							height: 40rpx;
						}
					}

					&-right {
						.sale-price {
							color: #000;
							display: inline-block;
							margin-right: 4rpx;

							text {
								font-size: 40rpx;
								text-decoration: blink;
								@include Db_moneyStyle();
								color: #000;
							}
						}
						.origin-price {
							font-size: 0;
						}
						.price-number {
							font-size: 16rpx;
							display: inline-block;
							vertical-align: middle;
							text-decoration: line-through;
						}

						&-discount {
							margin-left: 4rpx;
							font-weight: 500;
							color: #FF6B11;
							font-size: 16rpx;
							font-weight: 500;
							text-align: center;

							height: 28rpx;
							line-height: 28rpx;
							padding: 2rpx 10rpx;

							background: #FDF4EF;
							border-radius: 6rpx;
						}
					}
				}

				.product-sale {
					margin-top: -20rpx;
					.already-sale {
						font-size: 24rpx;
						color: #666;
					}
					.can-get {
						.get-money-remind{
							font-size: 24rpx;
						}
						.money-icon {
							color: #FF6B11;
							font-size: 24rpx;
						}
						.get-money {
							color: #FF6B11;
							font-size: 56rpx;
							font-family: font-number;
						}
					}
				}
				.product-discount {
					margin-top: 24rpx;
					display: flex;
					&-label {
						height: 48rpx;
						display: flex;
						align-items: center;
						background: #fff0e7;
						border-radius: 12rpx;
						margin-left: 8rpx;
						padding: 0 12rpx;
						text {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #ff6b11;
						}
						&:first-child {
							margin-left: 0;
						}
					}
				}
			}
		}

		&-footer {
			// height: 78rpx;
			// border-top: 1px solid #eee;
			padding-bottom: 24rpx;
			&-main {
				height: 40rpx;
				// margin-top: 18rpx;

				display: flex;
				align-items: center;
				justify-content: space-between;
				&-right {
					font-size: 24rpx;
					color: #333;
					image {
						width: 108rpx;
						height: 28rpx;
						margin-right: 4rpx;
						display: inline-block;
					}
				}
				&-left {
					background: #F6F6F6;
					border-radius: 8rpx;
					padding: 4rpx 12rpx;
					font-size: 20rpx;
					color: #666;
				}
				view {
					display: flex;
					align-items: center;

					// color: #333;

					.mao-hao {
						color: #5a83f0;
						margin-right: 4rpx;
					}
					text {
						// font-size: 28rpx;
						// font-weight: bold;

						&.countdown {
							color: #333;
							font-weight: bold;
							&.active {
								color: #ff3162;
							}
						}
					}
				}
			}
		}

		&:first-child {
			margin-top: 0;
		}

		&-other{
			padding-bottom: 24rpx;
			&-top{
				background: #FDF4EF;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				padding: 8rpx 8rpx 8rpx 72rpx;
				position: relative;
				image {
					width:72rpx;
					height: 72rpx;
					margin-right: 0;
					position: absolute;
					left: -8rpx;
					top: -8rpx;
				}
			}
		}
	}

	// 骨架图
	&.product-skelett {
		.layout-main-item-content-left {
			border-radius: 16rpx;
			background: $skelettBgColor;

			image {
				visibility: hidden;
			}
		}

		.product-discount,
		.layout-main-item-footer-main,
		.layout-main-item-header,.layout-main-item-other {
			border-radius: 8rpx;
			background: $skelettBgColor;

			view,
			text {
				visibility: hidden;
			}
		}

		.product-discount {
			width: 110rpx;
		}

		.product-price,
		.product-sale {
			visibility: hidden;
		}

		.product-title {
			> view {
				height: 36rpx;
				margin-bottom: 6rpx;
				border-radius: 8rpx;
				background: $skelettBgColor;

				&:last-child {
					width: 234rpx;
					margin-bottom: 0;
				}
			}
		}
	}
}
.flex-end {
	display: flex;
	align-items: flex-end;
}
</style>
